<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>博客</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1643567_yxz5icboc4.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css">
    <link th:href="@{/css/bootstrap.min.css}">
    <link th:href="@{/css/bootstrap.css}">
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <link th:href="@{/css/article.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet">
    <link th:href="@{/css/comments.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet" >
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <!--<link th:href="@{/css/bootstraps.css}" rel="stylesheet"/>-->
     <!--引入Prism代码高亮CSS -->
    <link th:href="@{/css/prism.css}" rel="stylesheet"/>

</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <!-- 个人简介 -->
    <div style="clear: both;"></div>
    <!--中间的内容-->

    <div id="contentLeft">
        <nav class="category">
            <ul class="introduction">
                <li><span id="person"><img style="width: 80px;height: 80px;" th:src="@{${article.user.userProfilePhoto}}"
                                           class="ui avatar image" /></span></li>
                <li><a>昵称: [[${article.user.userName}]] </a></li>
                <li><a th:href="@{'/concern/' + ${article.user.userId}}">关注: [[${concernNumber}]] </a></li>
                <li><a th:href="@{'/fans/' + ${article.user.userId}}">粉丝: [[${fansNumber}]] </a></li>
                <li><a th:href="@{'/person/' + ${article.user.userId}}">文章: [[${articleNumber}]] </a></li>
                <li><a th:href="@{'/collect/' + ${article.user.userId}}">我的收藏: [[${collectNumber}]] </a></li>
                <li><a>个人介绍: [[${article.user.userIntroduction}]]</a></li>

                <div th:if="${session.loginUser != null}">
                    <div th:if="${article.user.userName != session.loginUser.userName}">
                        <input id="uId" type="hidden" name = "userId"
                               th:value="${session.loginUser.userId}" />
                        <input id="userFriendId" type="hidden" name = "userFriendId"
                               th:value="${article.user.userId}" />

                        <div class="text-center">
                            <button class="btn btn-success" id="addUserConcernBtn"
                                    th:if="${c} == false">关注</button>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-success" id="cancelUserConcernBtn"
                                    th:if="${c} == true">取消关注</button>
                        </div>
                    </div>
                </div>

            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>热门文章</a></li>
                <li th:each="list : ${hotArticle}">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}" th:text="${list.articleTitle} +
                    '(' + '阅读数：' + ${list.articleViewCount} +')'"></a>
                </li>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>推荐文章</a></li>
                <li th:each="recommend : ${recommendArticle}"
                    th:if="${session.loginUser != null and recommendArticle != null}">
                    <a th:href="@{'/article/detail/' + ${recommend.articleId}}" th:text="${recommend.articleTitle} +
                        '(' + '阅读数：' + ${recommend.articleViewCount} +')'"></a>
                </li>
                <li th:each="hot : ${hotArticle}"
                    th:if="${session.loginUser == null or recommendArticle == null}">
                    <a th:href="@{'/article/detail/' + ${hot.articleId}}" th:text="${hot.articleTitle} +
                        '(' + '阅读数：' + ${hot.articleViewCount} +')'"></a>
                </li>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>最新文章</a></li>
                <li th:each="recent : ${recentArticle}">
                    <a th:href="@{'/article/detail/' + ${recent.articleId}}" th:text="${recent.articleTitle} +
                        '(' + '阅读数：' + ${recent.articleViewCount} +')'"></a>
                </li>
            </ul>
        </nav>
    <!--</div>-->



    <!-- 文章内容的展示 -->
    <div id="content" style="width: 60%; float: right; margin-right: 100px;">
        <!--文章标题-->
        <div>
            <h1 id="articleTitle" th:text="${article.articleTitle}"
                th:if="${not #strings.isEmpty(article)}">这里是文章的标题</h1>
        </div>
        <!--文章创建时间-->
        <div>
            <h5 id="userName" th:if="${not #strings.isEmpty(article)}" style="font-size: 16px;">
                <a th:href="@{'/person/' + ${article.user.userId}}">
                    <img th:src="@{${article.user.userProfilePhoto}}" alt="" class="ui avatar image">
                    作者：[[${article.user.userName}]]</a>
            </h5>
            <h5 id="articleCreateBy" th:if="${not #strings.isEmpty(article)}" style="font-size: 16px;">
                发布于：[[${article.articleDate}]]
                <i style="margin-left: 30px" class="eye icon"></i><i class="viewCount"> [[${article.articleViewCount}]]</i>
                <i style="margin-left: 20px" class="comment icon"></i><i class="commentCount"> [[${article.articleCommentCount}]]</i>
                <span class="like" style="margin-left: 20px">
                    <input type="hidden" id="userId" name = "userId" th:value="${session.loginUser.userId}"
                        th:if="${session.loginUser != null}"/>
                    <input type="hidden" id="articleId" name="articleId" th:value="${article.articleId}">

                    <span th:if="${session.loginUser != null}">
                        <span class="operate like" title="收藏" th:if="${b} == false">
                            <i class="heart empty icon" onclick="collect();"></i>
                            <i class="likeCount">[[${article.articleLikeCount}]]</i>
                        </span>
                        <!--href="javascript:;" onclick="cancel()"-->
                        <span class="operate like" title="取消收藏" th:if="${b} == true">
                            <i class="heart icon" onclick="cancel()"></i>
                            <i class="likeCount">[[${article.articleLikeCount}]]</i>
                        </span>
                    </span>
                </span>
                <!--<a style="margin-left: 300px;" href="javascript:;" onclick="update()"-->
                    <!--th:if="${session.loginUser != null and session.loginUser.userId == article.user.userId}">编辑</a>-->
            </h5>
        </div>
        <!--文章题图-->
        <div class="articlePicture">
            <img id="articlePicture" th:src="@{${article.articlePicture}}"
                 th:if="${not #strings.isEmpty(article)}"/>
        </div>
        <!--文章内容-->
        <div id="articleContent" th:utext="${article.articleContent}"
             th:if="${not #strings.isEmpty(article)}">
        </div>
        <br><br>
        <!--<hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>-->




        <!-- 发表评论 -->
        <div class="row main">
            <!--<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-left">-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="comment">
                        <h4><span th:text="${article.articleCommentCount}"></span> 条评论</h4>
                    </div>
                    <hr style="border-bottom: 1px rgb(231, 231, 231) solid;"/>


                    <!--评论的主要内容-->
                    <!--min-height: 128px;-->
                    <div style="height: auto; width: 100%;" th:each="comment :${commentInfo.list}">

                        <!--<hr style="border-bottom: 1px rgb(231, 231, 231) solid;"/>-->
                        <div class="comment-head">
                            <div style="margin-top: 8px;">
                                <a th:href="@{'/person/' + ${comment.user.userId}}">
                                    <!--class="class="ui avatar image" img-rounded img-comment"-->
                                    <img class="ui avatar image img-comment" th:src="@{${comment.user.userProfilePhoto}}">
                                </a>
                                <span style="float: left"  th:text="${comment.user.userName}"></span>
                                <span style="float: right" th:text="${comment.commentDate}"></span>
                            </div>
                        </div><br><br>

                        <div class="comment-body" th:text="${comment.commentContent}">
                        </div><br><br>


                        <div class="comment-footer">
                            <div>
                                <!-- 点赞 -->
                                <span th:each="notLike : ${commentNotLikes}" th:if="${session.loginUser != null}">
                                    <span class="operate like" th:if="${comment.commentId == notLike.commentId}">
                                        <i class="iconfont icon-z-like" th:like-id="${comment.commentId}" onclick="like(this)"></i>
                                    <span id="likeCount1" th:text="${comment.commentLikeCount == 0 ? '' :comment.commentLikeCount}"></span>
                                    </span>
                                </span>

                                <span th:each="like : ${commentLikes}" th:if="${session.loginUser != null}">
                                    <span class="operate like" th:if="${comment.commentId == like.commentId}">
                                        <i class="iconfont icon-dianzan1" th:like-id="${comment.commentId}" onclick="cancelLike(this)"></i>
                                    <span id="likeCount2" th:text="${comment.commentLikeCount == 0 ? '' :comment.commentLikeCount}"></span>
                                    </span>
                                </span>


                                <!-- 子评论 -->
                                <span class="operate answer" th:data-id="${comment.commentId}" onclick="showChildComment(this)">
                                    <i class="iconfont icon-pinglun"></i>
                                    <span th:id="${'commentCount-'+comment.commentId}"
                                          th:text="${comment.childCommentCount == 0 ? '' : comment.childCommentCount}">
                                    </span>
                                </span>
                            </div>

                            <!-- 回复评论的html -->
                            <!--<div class="collapse childCol col-lg-12 col-md-12 col-sm-12 col-xs-12"-->
                            <div class="childCol col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:none;"
                                     th:id="${'comment-' + comment.commentId}" th:if="${session.loginUser != null}">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-comment">
                                    <input type="text" class="form-control" th:id="${'childComment-'+comment.commentId}"
                                           name="childComment" placeholder="说说你的看法...">
                                    <button type="button" class="btn btn-success btn-comment" th:data-parentId="${comment.commentId}"
                                            onclick="subComment(this)">回复</button><br><br>
                                </div>
                            </div>
                        </div>
                        <hr style="border-bottom: 1px rgb(231, 231, 231) solid;"/>
                    </div><br>

                    <div class="ui middle aligned two column grid" th:if="${commentNumber > 5}">
                        <div class="column">
                            <a th:href="@{'/article/detail/' +
                                ${article.articleId}(pageNum=${commentInfo.hasPreviousPage}
                                ?${commentInfo.prePage}:1)}"
                               class="ui mini teal basic button">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a th:href="@{'/article/detail/' +
                                ${article.articleId}(pageNum=${commentInfo.hasNextPage}
                                ?${commentInfo.nextPage}:${commentInfo.pages})}"
                               class="ui mini teal basic button">下一页</a>
                        </div>
                    </div>

                </div>
            <!--</div>-->
        </div>


        <!-- 评论文章 -->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
            <div class="comment" th:if="${session.loginUser != null}">
                <div class="d-flex">
                    <div class="media">
                        <div class="media-comment">
                            <img class="ui avatar image" th:src="${session.loginUser.userProfilePhoto}"  >
                        </div>
                    </div>
                    <textarea id="commentArea" name="description"  class="comment-content open" maxlength="1000"
                              placeholder="说说你的看法..."></textarea>
                </div>
                <button type="button" class="btn btn-success btn-comment" onclick="postComment();">评论</button>
            </div>

            <div class="notLogin" th:if="${session.loginUser == null}">
                要评论文章请先<a onclick="toLogin()" style="color: blue;font-size: 18px">(登录)</a>
            </div>
        </div>

    </div>



    </div>


    <!-- 更新文章 -->
    <!-- MODAL -->
    <div class="modal fade" tabindex="-1" id="updateModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header alert-success">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <!--<span><h4 class="modal-title">更新文章</h4></span>-->
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label>文章标题:</label>
                            <input class="form-control" id="articleTitles">
                        </div>
                    </div><br>
                    <div class="row">
                        <div class="col-md-12">
                            <label>文章简介：</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <textarea id="articleSummary" class="form-control" rows="3"></textarea>
                        </div>
                    </div><br>
                    <div class="row">
                        <!--class="col-md-8 col-sm-8 col-xs-8"-->
                        <div class="col-md-12">
                            <label>文章分类：</label>
                            <select id="updateCategories"></select>
                        </div>
                    </div><br>
                    <!-- /. END ROW -->
                    <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                    <!--<label>文章题图：</label>-->
                    <!--<input class="form-control" id="articlePicture"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--/. END ROW -->
                    <div class="row">
                        <div class="col-md-12">
                            <label>文章内容</label>
                            <textarea id="articleContents" class="form-control" rows="12"></textarea>
                        </div>
                    </div>
                    <!--/. END ROW -->

                </div>
                <div class="modal-footer">
                    <button type="button" id="updateBtn" class="btn btn-success" data-dismiss="modal" articleId="">确认更新
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
    <!-- /. END MODAL -->


<!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/post.js}"></script>
    <script th:src="@{/js/myJs/comment.js}"></script>
    <script th:src="@{/js/myJs/prism.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/toastr/toastr.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <!--<script th:src="@{/editormd/editormd.js}"></script>-->

    <script>

        // 调用编辑器
        var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "600px",
                height  : 340,
                syncScrolling : "single",
                path    : "../editormd/lib/"
            });
        });

        // 增加用户关注事件
        $('#addUserConcernBtn').click(function() {
            var userId = $('#uId').val();
            var userFriendId = $('#userFriendId').val();
            var json = {
                userId: userId,
                userFriendId: userFriendId
            };
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                url: "http://localhost:8081/user/concern",
                data: JSON.stringify(json),
                success: function(result) {
                    // 刷新页面
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                },
                error: function() {
                    location.reload();
                }
            });
        });

        // 取消用户关注事件
        $('#cancelUserConcernBtn').click(function () {
            var userId = $('#uId').val();
            var userFriendId = $('#userFriendId').val();

            $.ajax({
                type: "DELETE",
                url: "http://localhost:8081/user/cancelConcern/" + userId + "/" + userFriendId,
                success: function(result) {
                    // 刷新页面
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                }
            });
        });

        // 更新文章按钮点击事件
        $('#updateBtn').click(function () {
            var articleId = $('#articleId').val();
            var articleTitle = $('#articleTitles').val();
            var articleSummary = $("#articleSummary").val();
            var categoryId = $("#updateCategories option:selected").attr("categoryId");
            var articleContent = $('#articleContents').val();
            var article = {
                articleId: articleId,
                articleTitle: articleTitle,
                articleSummary: articleSummary,
                sortId: categoryId,
                articleContent: articleContent
            };
            $.ajax({
                type: "PUT",
                url: "http://localhost:8081/article/update",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(article),
                success: function (result) {
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                },
                error: function () {
                    location.reload();
                }
            });
        });
    </script>
</html>